<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/static/css/font/iconfont.css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/bootstrap-table.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/style.css">
    <script src="/static/js/jquery-2.1.1.js"></script>
    <script src="/static/bootstrap/js/echarts.min.js"></script>
    <!--引用layui弹框插件-->
    <script src="/static/layui/layui.all.js"></script>
    <script src="/static/layui/layui.js"></script>
    <link href="/static/layui/css/layui.css" rel="stylesheet"/>
    <script src="/static/layui/lay/modules/layer.js"></script>
</head>
<style>
    html{background-color:#f9f9f9!important;}
    .table-hover{border-bottom:1px silver solid}
    site-demo-laydate{background-color:#fff;}
    .title{font-size:16px;padding-left:30px;padding:5px 25px;}
    .title span{border-left:2px solid #0b6fff;padding-left:15px;}
    .top_title{border:1px solid #d2d2d2;padding-bottom:8px;border-radius:6px;}
    .top_title .top_desc:nth-child(1) span{color:#24a5ff;}
    .top_title .top_desc:nth-child(2) span{color:#40c0cc;}
    .top_title .top_desc:nth-child(3) span{color:#ffa86e;}
    .top_title .top_desc:nth-child(4) span{color:#d258ff;}
    .top_title .top_desc:nth-child(5) span{color:#00e110;}
    .top_desc{width:19.5%}
    .top_desc1{width:8.333%;text-align: center}
    .zxd_top{margin-top:0px;margin-bottom:6px;}
    .zxd_top .top_desc span{font-size:18px;}
    .layui-laydate-footer{display: none!important;}


    .top_title .top_desc1:nth-child(1) span{color:#24a5ff;}
    .top_title .top_desc1:nth-child(2) span{color:#40c0cc;}
    .top_title .top_desc1:nth-child(3) span{color:#ffa86e;}
    .top_title .top_desc1:nth-child(4) span{color:#d258ff;}
    .top_title .top_desc1:nth-child(5) span{color:#00e110;}
</style>
<body>
<div class="page-wrapper">

    <section class="page-body ">

        <div class="row widget">
            <div class="row widget">

                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-red">
                            <i class="iconfont icon-caozuodangqianmoshi"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-red">{$investment}
                            </h1>
                            <p>总投资(万)</p>
                        </div>
                    </div>
                </div>


                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-lightskyblue">
                            <i class="iconfont icon-zongshu"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-lightskyblue">{$plan_investment}</h1>
                            <p>计划投资(万)</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 col-xs-12 col-sm-6">
                    <div class="small-box">
                        <div class="small-box-icon bg-lightskyblue">
                            <i class="iconfont icon-zongshu"></i>
                        </div>
                        <div class="small-box-inner">
                            <h1 class="data fg-lightskyblue">{$procount}</h1>
                            <p>项目数</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>


        <div class="row widget">
            <div class="box table">
                <div class="box-header ui-sortable-handle" data-trigger="drag">
                    <h3 class="box-title">
                        项目投资数量
                    </h3>
                </div>
            </div>

            <div class="box-body" >
                <div class="table-responsive" id="tendency" style="height:800px;width:1280px;" >

                </div>
            </div>
        </div>


    </section>




</div>



<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;



    });

    var tendency = echarts.init(document.getElementById('tendency'));
    tendency.setOption({
        left:0,
        backgroundColor:"#ffffff",
        // title: {
        //     text: '每个柱形颜色不同',
        //     left:"center"
        // },
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            top:"0",
            left: '0%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisTick:{
                show:false
            },
            data: {$data}
        }],
        yAxis: [{
            type: 'value',
            axisLine:{
                show:false
            },
            axisTick:{
                show:false
            },
            axisLabel: {
                show:false,
                formatter: '{value}'
            },
            splitLine: {
                show:false,
            }
        }],
        series: [{
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#000000',
                },
            },
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#7711AF', '#CF77FF', '#AE004F', '#F35872', '#FA7729','#FFC526', '#F8E71C', '#34ADAE', '#3DDFD2', '#A0FFFF'];
                        var colorListr = [ '#0f4471', '#00adb5', '#ff5722', '#5628b4', '#20BF55', '#f23557','#118df0', '#11cbd7','#d3327b','#ae318a','#993090','#6f3071'];
                        return colorListr[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: '{c}',
                        fontSize:14
                    },
                    shadowBlur: 10,
                    shadowColor: 'rgba(40, 40, 40, 0.3)',
                }
            },
            data: {$count}
        }]


    });

</script>


</body>
</html>